<!DOCTYPE html>
<!--依赖Bootstrap4.0和Jquery3.2.1-->
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device initial-scale=1,shrink-to-fit=no" >
    <meta name="template" content="album static web page">
    <meta name="author" content="https://gitee.com/PirateFlag">

    <link rel="icon" href="">
    <title>相册模板Bootstrap</title>

    <!--Bootstrap core CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!--Custom CSS,目前没有使用到，计划用于微调位置-->
    <link rel="stylesheet" href="album.css">
  </head>
  <body>
    <header>
      <nav>
      <!--class表示属性，id表示具体，同时下划线命名法-->

      <!--下拉内容-->
      <div class="collapse navbar-collapse bg-dark" id="navbar_header">
        <div class="container">
          <div class="row">
            <div class="col-sm-8 col-md-7 py-4">
              <h4 class="text-white">详细介绍</h4>
              <p class="text-muted">可以向相册加入信息,作者名称背景等,然后分享到社交网络上,目前仅仅是静态页面</p>
            </div>
            <!--col-sm-4 offset-md-1 py-4使用的是bootstrap的栅格偏移系统，用于适配不同页面-->
            <div class="col-sm-4 offset-md-1 py-4">
              <h4>联系作者</h4>
              <ul class="list-unstyled">
                <li><a href="#" class="text-white" title="277625446">通过QQ联系</a></li>
                <li><a href="https://gitee.com/PirateFlag" class="text-white" title="PirateFlag">通过码云联系</a></li>
                <li><a href="https://github.com/athanasiaorange" class="text-white" title="athanasiaorange">通过Github联系</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!--标志内容-->
      <div class="navbar navbar-dark bg-dark box-shadow">
        <div class="container d-flex justify-content-between">
          <!--主页logo-->
          <a href="#" class="navbar-brand d-flex">
            <!--引用一只来自外部的svg图像，你也可以更换成自己的图像,这是适配页面的矢量图-->
            <svg xmlns="http://www.w3.org/200/svg" width="35" height="35" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="mr-2">
              <path xmlns="http://www.w3.org/2000/svg" d="M 23 19 a 2 2 0 0 1 -2 2 H 3 a 2 2 0 0 1 -2 -2 V 8 a 2 2 0 0 1 2 -2 h 4 l 2 -3 h 6 l 2 3 h 4 a 2 2 0 0 1 2 2 Z">
              </path>
              <circle cx="12" cy="13" r="4"></circle>
            </svg>
            <strong>我的相册</strong>
          </a>
          <!--搜索框-->
          <!-- <div class="form-group">
            <label for=""></label>
            <input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId">
            <small id="helpId" class="text-muted">Help text</small>
          </div> -->
          <!--按钮内容-->
          <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar_header">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </div>
    </nav>
    </header>

    <main role="main">
      <!--主要介绍-->
      <section class="jumbotron text-center">
        <div class="container">
          <h1>我的相册-网站模板</h1>
          <p>这是一个用来修改的网站模板，你可以在这里随意的加上你想要的句子</p>
          <a href="#" class="btn btn-primary my-2">主要跳转按钮</a>
          <a href="#" class="btn btn-warning my-2">次要跳转按钮</a>
        </div>
      </section>

      <div class="album py-5 bg-light">
        <div class="container">

          <!--单个流卡-->
          <div class="row">
          <div class="col-md-4">
            <!--使用card式布局-->
            <div class="card mb-4 box-shadow">
              <img class="card-img-top" alt="Card image cap" src="001.jpg">
              <div class="card body">
                <h5 class="card-title">海岸</h5>
                <p class="card-text">澳大利亚和新西兰</p>
                <div class="d-flex justify-content-between aligin-item-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary">查看</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">编辑</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">举报</button>
                  </div>
                  <small class="text-muted">10分钟前</small>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <!--使用card式布局-->
            <div class="card mb-4 box-shadow">
              <img class="card-img-top" alt="Card image cap" src="001.jpg">
              <div class="card body">
                <h5 class="card-title">海岸</h5>
                <p class="card-text">澳大利亚和新西兰</p>
                <div class="d-flex justify-content-between aligin-item-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary">查看</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">编辑</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">举报</button>
                  </div>
                  <small class="text-muted">10分钟前</small>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <!--使用card式布局-->
            <div class="card mb-4 box-shadow">
              <img class="card-img-top" alt="Card image cap" src="001.jpg">
              <div class="card body">
                <h5 class="card-title">海岸</h5>
                <p class="card-text">澳大利亚和新西兰</p>
                <div class="d-flex justify-content-between aligin-item-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-outline-secondary">查看</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">编辑</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary">举报</button>
                  </div>
                  <small class="text-muted">10分钟前</small>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4">
              <!--使用card式布局-->
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" alt="Card image cap" src="001.jpg">
                <div class="card body">
                  <h5 class="card-title">海岸</h5>
                  <p class="card-text">澳大利亚和新西兰</p>
                  <div class="d-flex justify-content-between aligin-item-center">
                    <div class="btn-group">
                      <button type="button" class="btn btn-sm btn-outline-secondary">查看</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary">编辑</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary">举报</button>
                    </div>
                    <small class="text-muted">10分钟前</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <!--使用card式布局-->
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" alt="Card image cap" src="001.jpg">
                <div class="card body">
                  <h5 class="card-title">海岸</h5>
                  <p class="card-text">澳大利亚和新西兰</p>
                  <div class="d-flex justify-content-between aligin-item-center">
                    <div class="btn-group">
                      <button type="button" class="btn btn-sm btn-outline-secondary">查看</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary">编辑</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary">举报</button>
                    </div>
                    <small class="text-muted">10分钟前</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <!--使用card式布局-->
              <div class="card mb-4 box-shadow">
                <img class="card-img-top" alt="Card image cap" src="001.jpg">
                <div class="card body">
                  <h5 class="card-title">海岸</h5>
                  <p class="card-text">澳大利亚和新西兰</p>
                  <div class="d-flex justify-content-between aligin-item-center">
                    <div class="btn-group">
                      <button type="button" class="btn btn-sm btn-outline-secondary">查看</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary">编辑</button>
                      <button type="button" class="btn btn-sm btn-outline-secondary">举报</button>
                    </div>
                    <small class="text-muted">10分钟前</small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer class="text-muted">
      <div class="container">
        <p class="float-right">
          <a href="#">回到顶部</a>
        </p>
        <p>本页面由Bootsrap编写，如需使用请修改代码</p>
      </div>
    </footer>


    <!--Jquery的CDN依赖-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <!--popper的CDN依赖-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <!--bootstrap的CDN依赖-->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  </body>

</html>